import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Column } from '@ant-design/plots';

export type barProps = {
  height?: number;
  borderColor?: string;
  xAxisData?: {};
  yAxisData?:{};
  xField:{
      name:'',
      value:''
  };
  yField:{
    name:'',
    value:''
  };
  forceFit?: boolean;
  maxColumnWidth?:number;
  legendShow?: boolean;
  legendData:{
    name: '',
    marker: {
      symbol: 'square',// 是否为方块
      style: {
        fill: '#E09B27',// 填充颜色，注意要与线条颜色对应。
      },
    },
  },
  data: [];
};

const BarChart :React.FC<barProps> = (props) => {
  const height = props.height || 100;
  const data = props.data || []
  let xAxisData = props.xAxisData || {};
  let yAxisData = props.yAxisData || {};
  let xAxis = {
    label:{
      // formatter 对y轴文字进一步处理
      formatter: (v:any)=>{
          return v;
      },
      style: {
        stroke: '#9AA1A9',
        fontSize: 12,
        fontWeight: 300,
        fontFamily: 'Apercu',
      },
    },
    text:null,
    tickLine:null,
    line:{ style: { stroke: '#E9EBF1' }},
    grid:{
      line: {
          style: {
            stroke: '#E9EBF1',
            lineWidth: 1,
            lineDash: [4, 5],
            strokeOpacity: 0.7,
            shadowColor: '#E9EBF1',
            shadowBlur: 10,
            shadowOffsetX: 5,
            shadowOffsetY: 5,
            cursor: 'pointer'
          }
        }
  },
    ...xAxisData
  }
  let yAxis = {
    label: {
      // formatter 对y轴文字进一步处理
      formatter: (v:any)=>{
          return v;
      },
      style: {
        stroke: '#9AA1A9',
        fontSize: 12,
        fontWeight: 300,
        fontFamily: 'Apercu',
      },
    },
    text:null,
    tickLine:null,
    line:{ style: { stroke: '#E9EBF1' }},
    grid:{
      line: {
          style: {
            stroke: '#E9EBF1',
            lineWidth: 1,
            lineDash: [4, 5],
            strokeOpacity: 0.7,
            shadowColor: '#E9EBF1',
            shadowBlur: 10,
            shadowOffsetX: 5,
            shadowOffsetY: 5,
            cursor: 'pointer'
          }
        }
  },
    ...yAxisData
  }
  const config = {
    data,
    xField: 'xValue',
    yField: 'yValue',
    legend: {
      show:false,
    },
    label: {
      show:false,
      position: 'top',
      style: {
        fill: '#FFFFFF',
        opacity: 0.6,
      },
    },
    xAxis: xAxis,
    yAxis: yAxis,
    maxColumnWidth:props.maxColumnWidth || 10,
    meta: {
      xValue: {
        alias: props.xField?.name,
      },
      yValue: {
        alias: props.yField?.value,
      },
    },
  };
  return (
    <div style={{ height:height,width:'100%' }}>
      {
        height>0 && data.length>0 &&
        <Column {...config}/>
      }
    </div>
  );
};
export default BarChart;
